<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page isELIgnored="false" %>

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="resources/js/jquery-3.3.1.min.js"></script>
    <script src="resources/js/CalcEval.js"></script>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="resources/css/sale.css" />
</head>
<body>
<div id="page" >
    <img src="resources/img/b.jpg" class="bg">
    <div style="padding-top: 10px;text-align: left;height: 50px;">
        <input class="search__input" id="insearch" type="text" placeholder="搜索" value="">
        <img src="resources/img/seach.png" style="height: 30px; width: 30px;vertical-align: middle">
    </div>

    <div id="main">
        <div class="item1" style="background-color: gray;">
            <span class="span_case">商品名称</span>
            <span class="span_case">商品单价</span>
            <span class="span_case">商品数量</span>
            <span class="span_case">总价</span>
        </div>
        <hr />


        <c:forEach items="${list}" var="item" varStatus="status">
            <div class="item1">
                <span class="item_goods">${item.merchname}</span>
                <span class="item_price">${item.merchprice}</span>
                <span class="span_case">
                    <input type="button" value="-" id="${item.merchId}">
                    <span class="item_num" >0</span>
                    <input type="button" value="+" id="${item.merchId}">
                    </span>
                <span class="item_total">0</span>
            </div>
            <hr />
        </c:forEach>
    </div>

    <div class="qwe" style="display: none"></div>
    <div class="qwess" style="display: none"></div>


    <div class="total">
        合计金额：<span class="item_all" style="font-size: 30px">0.00</span>
        <button style="float: left;margin-top: 10px;height: 36px;width: 150px;border-radius: 5px; border: none;background-color: olivedrab;color: white;font-size: 19px;font-family: 楷体;" onclick="window.location.href='saledServlet?method=showLaundryList'">查看订单</button>


        <button class="order" style="margin-left: 100px;background-color: gray;color: white;">
            <span class="default">支付</span>
            <span class="success">支付成功
			    <svg viewbox="0 0 12 10">
			      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
			    </svg>
            </span>

            <div class="box"></div>
            <div class="truck">
                <div class="back"></div>
                <div class="front">
                    <div class="window"></div>
                </div>
                <div class="light top"></div>
                <div class="light bottom"></div>
            </div>
            <div class="lines"></div>
        </button>


        <!-- 模态框 -->
        <div id="myModal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>购物列表</h3>
                    <span id="closeBtn" class="close">×</span>
                </div>
                <div class="modal-body">
                    <div id="it_tm" style="width: 100%;height: 30px;font-size: 12px;">
		                	<span  style="width: 26%;text-align: center; display:inline-block;">
		                		名称
		                	</span>
                        <span  style="width: 26%;text-align: center;display:inline-block;">
		                		个数
		                	</span>
                        <span style="width: 26%;text-align: center;display:inline-block;">
		                		单价
		                	</span>
                    </div>
                    <%--                    <div id="" style="width: 100%;height: 30px;font-size: 12px;display:inline-block;">--%>

                    <%--                    </div>--%>
                </div>
                <!--<div class="modal-footer" id="app">
                    <span v-show="list.length!=0">
                    共<strong> {{list.length}} </strong>条数据</span>
                </div>-->
            </div>
        </div>
    </div>
</div>
<%--<script type="text/javascript" src="resources/js/modalBox.js"></script>--%>
</body>
<script>
    window.onload=function(){
        $(".item_num").text("0");
    }
    $(document).ready(function(){
        $(".item_num").text("0");
    });

    $(function(){
        $(".item_num").text("0");
        //加
        $("[value='+']").click(function(e){
            var z = $(this).prev("span").html();
            z = parseInt(z)+1;

            $(".qwe").html(e.target.id);
            $(".qwess").html(z);

            $(this).prev("span").html(z);
            dgzj(this);//单个商品的价格
            jszj();
        });
        //减
        $("[value='-']").click(function(){
            var z = $(this).next("span").html();
            z = parseInt(z)-1<0?0:parseInt(z)-1;
            $(this).next("span").html(z);
            dgzj(this);
            jszj();
        });
        //删除(清空)
        $(".delobj").click(function(){
            //$(this).parent().remove();
            var z = $(this).prev("span").html();
            z=0;
            $(this).prev("span").prev("span").children("span").html(z);
            $(this).prev("span").html(z);
            jszj();
        });
    })

    var ce = new CalcEval();//实例化计算的类
    function dgzj(e){//单个商品的价格
        var sl = $(e).parent().children("span").html();
        var dj = $(e).parent().prev("span").html();
        var zj = $(e).parent().next("span");
        jg = ce.eval(parseInt(sl)+"*"+parseFloat(dj));
        zj.html(jg);
    }
    function jszj(){//全部商品的价格
        var num=0;
        $(".item_total").each(function() {
            num = ce.eval(num+"+"+parseFloat($(this).html()));
        });
        $(".item_all").html(num);
    }


    $('.order').click(function(e) {
        var numsId = $(".qwe").html();

        // alert($(".item_num").text()/10000)
        // var nums=$(".item_num".search__input).text();
        alert($(".qwess").html());
        var nums=$(".qwess").html();

        let button = $(this);

        if(!button.hasClass('animate')) {
            button.addClass('animate');
            setTimeout(() => {
                button.removeClass('animate');
            }, 10000);
        }
        window.location.href="saledServlet?method=saled&mid="+parseInt(numsId)+"&count="+nums;
    });


    const input = document.querySelector(".finder__input");
    const finder = document.querySelector(".finder");
    const form = document.querySelector("form");

    input.addEventListener("focus", () => {
        finder.classList.add("active");
    });

    input.addEventListener("blur", () => {
        if (input.value.length === 0) {
            finder.classList.remove("active");
        }
    });

    form.addEventListener("submit", (ev) => {
        ev.preventDefault();
        finder.classList.add("processing");
        finder.classList.remove("active");
        input.disabled = true;
        setTimeout(() => {
            finder.classList.remove("processing");
            input.disabled = false;
            if (input.value.length > 0) {
                finder.classList.add("active");
            }
        }, 1000);
    });

    function toSeach(merchId) {
        // var seachVul=document.getElementById("insearch").value;
        window.location.href="merchServlet?method=supplierOne&suName="+seachVul;
    }
</script>
</html>

